import Vue from 'vue'
// 1. 导入
import Vuex from 'vuex'
import App from './App.vue'
Vue.config.productionTip = false // 关闭开发模式下的控制台提示信息
// 2. 使用插件
Vue.use(Vuex)

// 3. 创建一个仓库  store
const store = new Vuex.Store({
    // 1. state 数据
    state: {
        count: 1,
        school: 'atguigu'
    },
    // 2. actions 服务员 本质都是一个个的函数
    actions: {
        /**
         * 
         * @param {*} context 是一个小型的 $store 有 commit dispatch state
         * @param {*} value 数据
         */
        decrement(context, value) {
            console.log(context, value)
            // context.state.count -= value // 可以改数据，也可以重新渲染，但是vuex 调试工具检测不到数据的变化，不可取
            context.commit('DECREMENT', value)
        },
        increment(context, value) {
            context.commit('INCREMENT', value)
        },
        // 和为奇数的时候，才能累加
        incrementOdd(context, value) {
            // 服务员负责逻辑判断和异步处理等等，到mutation只负责数据修改
            if (context.state.count % 2) {
                // 说明是奇数
                context.commit('INCREMENT', value)
            }
        },
        // 一秒后加
        wait(context, value){
            // actions中可以记性异步操作
            setTimeout(()=>{
                context.commit('INCREMENT', value)
            },1000)
        }
    },
    // 3. mutations 厨师 也是函数
    mutations: {
        /**
         * 
         * @param {*} state  vuex中定义的状态数据
         * @param {*} value  actions穿过来的数据
         */
        DECREMENT(state, value) {
            console.log('state: ', state)
            console.log('value: ', value)
            state.count -= value
        },
        INCREMENT(state, value) {
            state.count += value
        }
    }
})

new Vue({
    // 4. 配置store: 所有的 vc 和vm身上都会有 $store属性
    store,
    render: h => h(App),
    mounted() {
        console.log('vm this: ', this)
    }
}).$mount('#app')




